<template>
  <ul
    role="list"
    :class="gridColumnClass"
    class="grid gap-x-4 gap-y-2 sm:gap-x-6 xl:gap-x-8 h-full w-auto"
  >
    <li v-for="item in items" :key="item.source" class="relative text-white">
      <p class="block text-sm font-medium truncate pointer-events-none">
        {{ item.title }}
        <image-icon class="-mt-3 w-36" :image="BorderImage" />
      </p>
      <!-- aspect-w-10 aspect-h-7 -->
      <div
        class="
          mt-1
          group
          block
          w-full
          rounded-lg
          bg-gray-100
          focus-within:ring-2
          focus-within:ring-offset-2
          focus-within:ring-offset-gray-100
          focus-within:ring-indigo-500
          overflow-hidden
        "
      >
        <!-- <videojs-player :src="item.source" /> -->
        <one-player :videoUrl="item.source" />
        <!-- <flv-player :src="item.source" /> -->
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref, toRefs } from 'vue'
import ImageIcon from '../icon/ImageIcon.vue'
import BorderImage from '../../assets/border.png'

import VideojsPlayer from '../video/VideojsPlayer.vue'
import OnePlayer from '../video/OnePlayer.vue'
import FlvPlayer from '../video/FlvPlayer.vue'

export interface ImageListItem {
  title: string
  source: string
}

// 列数与class名的对应
const columnClassMap: { [key: number]: string } = {
  1: 'grid-cols-1',
  2: 'grid-cols-2',
}

export default defineComponent({
  components: {
    ImageIcon,
    // LivePlayer,
    // SimplePlayer,
    // VideojsPlayer,
    OnePlayer,
    FlvPlayer,
  },
  props: {
    items: {
      type: Array as PropType<ImageListItem[]>,
    },
    // grid列数： 1， 2
    columns: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const { columns } = toRefs(props)

    const gridColumnClass = ref('')

    onMounted(() => {
      gridColumnClass.value = columnClassMap[columns.value]
    })

    return {
      BorderImage,
      columnClassMap,
      gridColumnClass,
    }
  },
})
</script>
